Using state managers

Use states to define the look and behavior of your Kanzi application in different states. For example, you can use states to:

• Set the size of items in a layout to emphasize that an item is selected.
• Show or hide parts of a user interface when the application is in a certain state.
• Enable or disable controls, such as buttons, in your application based on the state of the application.
• Animate your application.

Properties set in states override the default, inherited, and local property values.

Creating a state manager for a button

Here you create a state manager for a button that tilts the Plane representing the button when user presses the button.

To create a state manager for a button:

1. In the Project create a Button 3D node and add to it a Plane node.
   You create a state manager in the Button 3D node to change the rotation of the Plane node when the Button 3D node is pressed.
   
2. In the Project select the Button 3D node and in the State Tools click .
   Kanzi Studio creates a new state manager and assigns it to the selected node.
   
3. In the State Tools click to create a state.
   
4. In the State Tools double-click the name of the state and enter a new name for the state.
   For example, name the state Pressed.
   
5. In the Preview click Edit and use the Node tool to set the rotation of the Plane node when the button is pressed.
   
6. In the State Tools click to save the current values to that state.
   
7. Repeat the previous three steps to create a state when the button is not pressed.
   When you click a state in the State Tools, you can see in the Preview what the nodes controlled by that state manager look like in that state.
   
   
8. In the State Tools click <No Controller Property> and in the context menu select Button > Is Down.
   In a state manager the value of the property you select as the Controller Property defines the conditions when each state in a state group is active. Here you use the Is Down property to transition to a state based on the value of that property.
   
   
9. In the State Tools set the value of the Controller Property in the Pressed state to True. By doing so your Kanzi application uses the Pressed state when the button is pressed and the Released state when the button is not pressed.
   
10. In the State Tools click Active to deactivate the State Tools.
    When you want to try out in the Preview how the state manager works in your application you need to turn the State Tools off.
    
    
11. In the Preview click Edit to exit the Edit mode and click the Plane node. When you click the Plane node and hold down the mouse button you enter the Pressed state. When you release the mouse button you enter the Released state. The state manager uses the default transitions to transition between states. See Setting the transitions between states.
    

Setting the transitions between states

When you create states the state manager uses the default transition to transition between states.

To set the transition between states:

1. Create a button and a state manager that has one state group with two states (for example, Pressed and Released). See Creating a state manager for a button.
2. In the State Tools click to open the State Transition Editor.
   
3. When you first open the State Transition Editor it shows the transition that is used between all states in that state group. Move your mouse pointer over to see the details of the transition.
   
4. In the window that pops up set:
   • Duration to the length of the transition in milliseconds. Either click and drag in the Duration area or enter the new value to set the duration of the transition.
   • Allow interrupt or Always full time set how Kanzi handles interruption of the transition:
     • Always full time uses the entire time set in the Duration to transition to the state after the interruption occurs.
     • Allow interrupt uses only the remaining time set in the Duration to transition to the state after the interruption occurs.
   • Configure Animations enables you to further define the details of the transition. In the State Transition Editor window set:
     • Start Time to the time in milliseconds that elapses before the transition starts.
     • Direction to whether the transition applies to the transition from the Start State to the End State, or to the transitions from both states:
       • Unidirectional applies the transition only to the transition from the Start State to the End State.
       • Bidirectional applies the transition to the transition from the Start State to the End State, and from the End State to the Start State.
     • Easing Function sets the easing function that defines the curve of the transition.
       Use an easing function to make UI elements more lifelike. Because objects in real life never start or stop immediately, the right easing function can help you create a more pleasant user experience.
       Select the most suitable easing function.
       

       Hover over the image of the easing function to see the type of the animation it creates.

       Easing function	Easing mode
       	Ease in	Ease out	Ease in out
       Back
       Bounce
       Circle
       Cubic
       Elastic
       Exponential
       Linear
       Power
       Quadratic
       Quartic
       Quintic
       Sine
       Smoother step
       Smooth step
       Step

     • Easing Mode defines how the easing function is applied to the transition:
       • Ease in applies to the transition the easing function as it is.
       • Ease out applies to the transition the negative value of the easing function.
       • Ease in-out applies to the first half of the transition the easing function as it is, and to the second half of the transition the negative value of the easing function.
     • Transition Animations enables you to use a custom animation for the transition.
5. (Optional) To set transitions between specific states:
   1. Right-click in the State Transition Editor and in the Add State To Canvas select the state for which you want to set the transitions.
      
   2. Click the state to select it and move your mouse pointer over to see the details of the transition.
      
6. In the Preview click Edit to exit the Edit mode and click the Plane node. The state manager uses the transitions you set in the State Transition Editor.

See also

State managers

Using the Button nodes

Open topic with navigation